<template>
  <!-- 编辑教师和学生信息组件 :visible.sync显示侧边栏 direction侧边栏打开方向 -->
  <el-drawer :visible.sync="showDrawer" title="编辑账号" direction="rtl" size="40%">
    <el-form :model="editUser" status-icon :rules="rules" ref="editUser" label-width="100px">
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="editUser.sex">
          <el-radio label="男" /><el-radio label="女" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="editUser.status">
          <el-radio :label="1">启用</el-radio><el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="账号" prop="id">
        <el-input type="text" v-model="editUser.id" autocomplete="off" :disabled="true" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input type="text" v-model="editUser.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="学院" prop="collegeId">
        <CollegeSelect v-model="editUser.collegeId" />
      </el-form-item>
      <!-- 只有身份为学生时才会展示班级选项 -->
      <el-form-item label="班级" prop="majorId" v-if="identify == '学生'">
        <MajorSelect v-model="editUser.majorId" :collegeId="editUser.collegeId" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('editUser')">提交</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<script>
import { getUserDetail, updateUser } from '@/api/manage'
import CollegeSelect from '@/components/CollegeSelect'
import MajorSelect from '@/components/MajorSelect'

export default {
  name: 'EditUserPage', // 编辑教师和学生页面
  components: {
    CollegeSelect,
    MajorSelect
  },
  props: {
    identify: {
      required: true,
      type: Function,
      default: () => { return '学生' }
    }
  },
  data () {
    return {
      showDrawer: false, // 显示侧边栏true
      // 存放编辑教师和学生的信息
      editUser: {
        identify: '',
        id: '',
        name: '',
        collegeId: '',
        majorId: '',
        sex: '',
        status: ''
      },
      // 设置对应的校验规则
      rules: {
        id: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { pattern: /^\d{12}$/, message: '账号必须为12位数字', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5]{2,16}$/, message: '姓名必须为2-16位汉字', trigger: 'blur' }
        ],
        collegeId: [{ required: true, message: '学院不能为空', trigger: 'blur' }],
        majorId: [{ required: true, message: '专业不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    // 监听学院id的变化
    'editUser.collegeId' (val, oldVal) {
      if (oldVal === '') return // EditUser会比MajorSelect先加载 第一次加载班级不需要为空
      if (val !== oldVal) this.editUser.majorId = '' // 更改了学院 班级也要更改为空
    }
  },
  methods: {
    // 显示弹层
    async openDrawer (row) {
      this.showDrawer = true
      const { data: { data } } = await getUserDetail(row.id, this.identify)
      this.editUser = data
      // 由于返回数据中identify字段为null 会把原数据覆盖掉 需要重新赋值identify
      this.editUser.identify = this.identify
    },
    // 提交表单 发送请求
    submitForm (editUser) {
      // 校验数据是否合法
      this.$refs[editUser].validate(async (valid) => {
        if (valid) {
          await updateUser(this.editUser)
          this.$message.success('编辑成功！')
          // 编辑成功后关闭侧边栏并通知父组件更新页面
          this.showDrawer = false
          this.$emit('successEdit')
        }
      })
    },
    // 重置表单
    async resetForm () {
      const { data: { data } } = await getUserDetail(this.editUser.id, this.identify)
      this.editUser = data
      // 由于返回数据中identify字段为null 会把原数据覆盖掉 需要重新赋值identify
      this.editUser.identify = this.identify
    }
  }
}
</script>
